<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clearfix:after{
            display: table;
            content: "";
            clear: both;
        }
       body{
           background-color: pink;
       }
        #nei{
            width: 400px;
            height: 600px;
            background-color: black;
            margin: 100px auto;
            position: relative;
            border-radius: 20px;
        }
        #nei>input{
            width: 398px;
            height: 200px;
            background-color: black;
            color: white;
            border: black;
            text-align: right;
            font-size: 50px;
            border-radius: 20px 20px 0 0;
        }
        #anniu{
            width: 398px;
            height: 398px;
            background-color:#ccc;
            position: absolute;
            top: 200px;
            border: 1px solid black;
            border-radius: 0 0 20px 20px;
        }
        #anniu>ul{
            margin-top: 10px;
            width: 95%;
            height: 95%;

        }
        #anniu>ul>li{
            float: left;
            width: 20%;
            height: 19%;
            line-height: 70px;
            list-style: none;
            background-color: yellow;
            border-radius: 50%;
            text-align: center;
        }
        #anniu>ul>li:nth-of-type(1){
            margin-right: 15px;
            margin-left: 25px;
            margin-bottom: 3px;
            background-color: rgba(105, 105, 105, 0.62);
            font-weight: bold;
            font-size: 20px;
        }
        #anniu>ul>li:nth-of-type(2){
            margin-right: 15px;
            margin-bottom: 3px;
            background-color:rgba(105, 105, 105, 0.62);
            font-weight: bold;
            font-size: 20px;
        }
        #anniu>ul>li:nth-of-type(3){
            margin-right: 15px;
            margin-bottom: 3px;
            background-color:rgba(105, 105, 105, 0.62);
            font-weight: bold;
            font-size: 20px;
        }
        #anniu>ul>li:nth-of-type(4){
            margin-bottom: 3px;
            background-color: darkorange;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(5){
            margin-right: 15px;
            margin-left: 25px;
            margin-bottom: 3px;
            background-color: dimgray;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(6){
            margin-right: 15px;
            margin-bottom: 3px;
            background-color: dimgray;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(7){
            margin-right: 15px;
            margin-bottom: 3px;
            background-color: dimgray;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(8){
            margin-bottom: 3px;
            background-color: darkorange;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(9){
            margin-right: 15px;
            margin-left: 25px;
            margin-bottom: 3px;
            background-color: dimgray;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(10){
            margin-right: 15px;
            margin-bottom: 3px;
            background-color: dimgray;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(11){
            margin-right: 15px;
            margin-bottom: 3px;
            background-color: dimgray;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(12){
            margin-bottom: 3px;
            background-color: darkorange;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(13){
            margin-right: 15px;
            margin-left: 25px;
            margin-bottom: 3px;
            background-color: dimgray;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(14) {
            margin-right: 15px;
            margin-bottom: 3px;
            background-color: dimgray;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(15){
            margin-right: 15px;
            margin-bottom: 3px;
            background-color: dimgray;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(16){
            margin-bottom: 3px;
            background-color: darkorange;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(17){
            margin-right: 15px;
            margin-left: 25px;
            margin-bottom: 3px;
            width: 44%;
            border-radius: 50px;
            background-color: dimgray;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(18){
            margin-right: 15px;
            margin-bottom: 3px;
            background-color: dimgray;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        #anniu>ul>li:nth-of-type(19){
            margin-bottom: 3px;
            background-color: darkorange;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
    </style>
</head>
<body>
<div id="nei">
    <input value="0" id="result">
    <div id="anniu">
        <ul class="clearfix">
            <li class="button">AC</li>
            <li class="button">+/-</li>
            <li class="button">%</li>
            <li class="button">/</li>
            <li class="button">7</li>
            <li class="button">8</li>
            <li class="button">9</li>
            <li class="button">*</li>
            <li class="button">4</li>
            <li class="button">5</li>
            <li class="button">6</li>
            <li class="button">-</li>
            <li class="button">1</li>
            <li class="button">2</li>
            <li class="button">3</li>
            <li class="button">+</li>
            <li class="button">0</li>
            <li class="button">.</li>
            <li class="button">=</li>
        </ul>
    </div>
</div>
</body>
<script>
    let num1=0;
    let num2="+";
    let num3=0;
    let x=null;
    let arr=[];
    let con=document.getElementById("result");
    for (let i=0;i<19;i++){
        let but=document.getElementsByClassName("button")[i];
        but.onclick=function () {
            x=this.innerHTML;
            main()
        }
    }
    function main() {
        if(!isNaN(x)||x==="."){
            arr.push(x);
            con.value=arr.join('');
        }else if(x==="AC"){
            num1=0;
            num2="+";
            num3=0;
            x=null;
            arr=[];
            con.value=num1;
        }else{
            num3=parseFloat(arr.join(''));
            count();
            con.value=num1;
            arr=[];
            num2=x;
        }
    }
    function count() {
        if(num2==="+"){
            num1+=num3;
        }else if(num2==="-"){
            num1-=num3;
        }else if(num2==="*"){
            num1*=num3;
        }else if(num2==="/"){
            num1/=num3;
        }
    }
</script>
</html>